<template>
    <div>
        <panle title='数字人' content="数字人"></panle>
        <!--标签-->
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="数字人" name="first">
                    <div class="first_content">
                        <!--筛选条件-->
                        <div class="shaixuan">
                            <div>
                                <el-input placeholder="搜索关键词" v-model="searchinput" class="input-with-select">
                                    <el-select v-model="searchtype" slot="prepend" placeholder="请选择">
                                        <el-option label="昵称" value="1"></el-option>
                                        <el-option label="内容" value="2"></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                                </el-input>
                            </div>
                            <el-select style="margin-left:20px;" v-model="type" placeholder="请选择" @change="typechange">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option v-for="item in TypeData" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button size="mini" @click="init()" style="margin-left: 10px;">刷新</el-button>
                            <el-button class="addshuziren_btn" type="danger" size="mini" round @click="createdShuziren"
                                v-show="hasPermission('live:shuziren:add')">+创建数字人</el-button>
                            <el-button class="daorushuziren_btn" size="mini" type="primary" round
                                @click="daoru">导入</el-button>
                        </div>
                        <div class="first_table">
                            <el-row>
                                <el-col :span="24">
                                    <div class="yixuan">已选 {{ multipleSelectioncount }} <el-button
                                            @click="piliangshanchu" type="text"
                                            v-show="hasPermission('live:shuziren:batch_del')">批量删除</el-button></div>
                                </el-col>
                            </el-row>
                            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                                stripe default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                                <el-table-column prop="touxiang_img" label="头像">
                                    <template slot-scope="scope">
                                        <el-image :src="scope.row.touxiang_img" fit="fill"
                                            style="width: 60px;height: 60px;"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nick" label="昵称"></el-table-column>
                                <el-table-column prop="pinglun" label="内容"></el-table-column>
                                <el-table-column prop="flagname" :formatter="formatShuzirenType"
                                    label="类型"></el-table-column>

                                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                                <el-table-column prop="id" label="操作"
                                    v-if="isShow(['live:shuziren:edit', 'live:shuziren:del'])">
                                    <template slot-scope="scope">
                                        <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil"
                                            perms="live:shuziren:edit" @click="edit(scope.row)"></PersButton>
                                        <PersButton type="text" size="mini" icon="el-icon-delete"
                                            perms="live:shuziren:del" label="删除" @click="del(scope.row)"></PersButton>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
                                    background layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>

                    </div>

                    <!--弹出层  导入数字人-->
                    <el-dialog v-dialogDrag :visible.sync="open2" width="600px" :modal="false" title="导入数字人"
                        v-show="hasPermission('live:shuziren:import')">
                        <el-row>
                            <el-col :span="24">
                                <input type="file" @change="handleChange" />
                            </el-col>
                            <el-col :span="24" style="display:flex;align-content:center;margin-top:20px;">
                                <div style="width:80px;display:flex;line-height:30px;">类型</div>
                                <el-select v-model="flagid2" placeholder="请选择" size="small" style="width:150%">
                                    <el-option v-for="item in TypeData" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="24" style="margin-top:20px;">
                                <div class="daoru_txt">最大支持 10000 条记录（支持xlsx文件，大小请控制在 10MB 以内）</div>
                            </el-col>
                            <el-col :span="24" style="margin-top:20px;">
                                <div>下载导入模版：<a href="https://un.tongshuzhijia.com/Uploads/shuziren/shuziren.xlsx"
                                        target="_blank">数字人导入模版.xlsx</a></div>
                            </el-col>
                            <el-col :span="24" style="margin-top:20px;">
                                <el-button type="primary" @click="daorushuziren" size="small">确认导入</el-button>
                            </el-col>
                        </el-row>
                    </el-dialog>
                    <!--弹出层  添加数字人-->
                    <el-dialog v-dialogDrag :visible.sync="open" width="600px" @close="dialogclose" :modal="false"
                        :title="!form.id ? '创建数字人' : '编辑数字人'">
                        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="头像" prop="touxiang_img">

                                        <div class="uploadcol">
                                            <div class="uploadborder">
                                                <img v-if="dialogImageUrl" :src="dialogImageUrl" width="100%"
                                                    height="100%" />
                                                <img v-else src="@/assets/img/uploadimg.jpg" width="100%"
                                                    height="100%" />

                                            </div>
                                            <el-button type="primary" @click="openUploadDialBg" size="mini"
                                                style="margin-top:10px">上传头像</el-button>
                                        </div>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24">
                                    <el-form-item label="昵称" prop="nick">
                                        <el-input style="width:50%" v-model="form.nick" placeholder="请输入昵称"
                                            size="small" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="类型" prop="flagid">
                                        <el-select v-model="form.flagid" placeholder="请选择" size="small"
                                            style="width:150%">
                                            <el-option v-for="item in TypeData" :key="item.id" :label="item.name"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="评论" prop="pinglun">
                                        <el-input type="textarea" v-model="form.pinglun" placeholder="请输入内容"
                                            size="small" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="open = false" size="small">取 消</el-button>
                            <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')"
                                size="small">确
                                定</el-button>
                        </div>

                    </el-dialog>

                    <select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum"
                        @selectSure="selectImgs" :type="0"></select-img>

                </el-tab-pane>
                <el-tab-pane label="数字人类型" name="second">
                    <div class="first_content">
                        <!--筛选条件-->
                        <div class="shaixuan">
                            <div>
                                <el-input placeholder="搜索关键词" v-model="searchinputgroup" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="searchgroup"></el-button>
                                </el-input>
                            </div>
                            <el-button size="mini" @click="init2()" style="margin-left: 10px;">刷新</el-button>
                            <el-button class="addshuziren_btn" type="danger" size="mini" round
                                @click="createdShuzirengroup">+创建数字人类型</el-button>
                        </div>
                        <div class="first_table">
                            <el-row>
                                <el-col :span="24">
                                    <div class="yixuan">已选 {{ multipleSelectioncountgroup }} <el-button
                                            @click="piliangshanchugroup" type="text">批量删除</el-button></div>
                                </el-col>
                            </el-row>
                            <el-table :data="tableDatagroup" style="width: 100%;margin-bottom: 20px;" row-key="id"
                                border stripe default-expand-all v-loading="loadinggroup"
                                @selection-change="handleSelectionChangegroup">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                                <el-table-column prop="name" label="名称"></el-table-column>
                                <el-table-column prop="remark" label="备注"></el-table-column>
                                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                                <el-table-column prop="id" label="操作">
                                    <template slot-scope="scope">
                                        <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil"
                                            perms="sys:role:edit" @click="editgroup(scope.row)"></PersButton>
                                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del"
                                            label="查看" @click="chakangroup(scope.row)"></PersButton>
                                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del"
                                            label="删除" @click="delgroup(scope.row)"></PersButton>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChangegroup"
                                    @current-change="handleCurrentChangegroup" :current-page="pageNumbergroup"
                                    :page-sizes="[10, 50, 100, 200]" :page-size="pageSizegroup" background
                                    layout="total, sizes, prev, pager, next, jumper" :total="totalgroup">
                                </el-pagination>
                            </div>
                        </div>
                        <!--弹出层  添加数字人-->
                        <el-dialog v-dialogDrag :visible.sync="opengroup" width="600px" append-to-body
                            :title="!formgroup.id ? '创建数字人类型' : '编辑数字人类型'">
                            <el-form ref="form" :model="formgroup" :rules="rulesgroup" label-width="80px">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="类型名称" prop="name">
                                            <el-input style="width:50%" v-model="formgroup.name" placeholder="请输入名称"
                                                size="small" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="备注" prop="remark">
                                            <el-input type="textarea" v-model="formgroup.remark" placeholder="请输入内容"
                                                size="small" />
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="opengroup = false" size="small">取 消</el-button>
                                <el-button type="primary"
                                    @click="!formgroup.id ? submitFormgroup('form') : subEditFormgroup('form')"
                                    size="small">确 定</el-button>
                            </div>

                        </el-dialog>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import { getShuZiRenType, getShuZiRenData, createShuziren, delShuziren, editShuziren, pldelShuziren, daorushuziren, getShuZiRenDatagroup, createShuzirengroup, delShuzirengroup, editShuzirengroup, pldelShuzirengroup } from '@/api/live/shuziren';
import SelectImg from '@/components/select-img';
import { hasPermission, isShow } from '@/common/permission'

export default {
    components: {
        Panle,
        PersButton,
        SelectImg
    },
    data() {
        return {
            IsShowPicDig: false,
            headers: { "Content-Type": "multipart/form-data;charset=UTF-8" },
            file: null,
            loadinggroup: false,
            tableDatagroup: [],
            multipleSelectioncountgroup: 0,
            pageSizegroup: 10, //一页显示多少条
            pageNumbergroup: 1,
            totalgroup: 0, //总页数
            searchinputgroup: '',
            fileList2: [],
            flagid2: '',
            filelist: [],
            multipleSelectioncount: 0,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            TypeData: [],
            type: '-1',
            searchtype: '1',
            searchinput: '',
            activeName: 'first',
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            open: false,
            open2: false,
            form: {
                "id": '',
                "touxiang_img": '',
                "nick": "",
                "flagid": '',
                "pinglun": '',
            },
            rules: {

                flagid: [{
                    required: true,
                    message: "类型不能为空",
                    trigger: "blur"
                }],
                pinglun: [{
                    required: true,
                    message: "评论不能为空",
                    trigger: "blur"
                }],
            },

            opengroup: false,
            formgroup: {
                "id": '',
                "name": "",
                "remark": '',
            },
            rulesgroup: {

                name: [{
                    required: true,
                    message: "类型不能为空",
                    trigger: "blur"
                }],
                remark: [{
                    required: true,
                    message: "评论不能为空",
                    trigger: "blur"
                }],
            },

            clickType: false,
            imgnum: 1, //选择图片数量
        }
    },
    created() {

        this.init();
        this.init2();
    },
    methods: {
        hasPermission,
        isShow,
        handleAvatarSuccess(res, file) {
            console.log(file);
            this.dialogImageUrl = URL.createObjectURL(file.raw);
        },
        handleChange(event) {
            this.file = event.target.files[0];
            console.log(this.file);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        init: function () {
            this.loading = true;
            let _param = {
                "size": this.pageSize,
                "page": this.pageNumber,
                "type": this.searchtype,
                "input": this.searchinput,
                "flag": this.type
            }
            getShuZiRenData(_param).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            })
            getShuZiRenType().then((res) => {
                console.log(res);
                this.TypeData = res.data;
            })
        },
        search: function () {
            this.searchinput = this.searchinput;
            this.init();
        },
        typechange: function (e) {
            console.log(e);
            this.flag = e;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        //已选
        handleSelectionChange: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.id)

            }
            this.multipleSelection = selectChang;
            this.multipleSelectioncount = selectChang.length;
            console.log(selectChang);
        },
        //创建表单
        createdShuziren: function (e) {
            this.form = {
                "id": '',
                "touxiang_img": '',
                "nick": "",
                "flagid": '',
                "pinglun": '',
            },
                this.open = true;
        },
        //提交表单  创建 
        submitForm: function (e) {
            console.log(e);
            this.form.touxiang_img = this.dialogImageUrl;
            createShuziren(this.form).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                    this.open = false;
                } else {
                    this.msgError(res.msg);
                }
            })


        },
        subEditForm: function (e) {
            console.log(e);
            this.form.touxiang_img = this.dialogImageUrl;
            editShuziren(this.form).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                    this.open = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },

        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        del: function (data) {
            this.$confirm('确定删除【' + data.nick + '】数字人吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'id': data.id
                }
                delShuziren(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit: function (data) {

            this.form.id = data.id;
            this.dialogImageUrl = data.touxiang_img;
            this.filelist = [{ 'name': '', 'url': this.dialogImageUrl }];
            console.log(this.filelist);
            let editForm = {
                "id": data.id,
                "nick": data.nick,
                "touxiang_img": data.touxiang_img,
                "flagid": data.flagid,
                "pinglun": data.pinglun,

            }
            Object.assign(this.form, editForm);
            this.open = true;
        },
        //批量删除
        piliangshanchu: function (e) {
            this.$confirm('确定批量删除选中的数字人吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'ids': this.multipleSelection
                }
                pldelShuziren(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //单文件提示，超出数量
        exceed: function (e) {
            this.msgError('图片只能上传一个');
        },
        //监听关闭弹窗
        dialogclose: function (e) {
            this.filelist = [];
            this.form = {
                "id": '',
                "touxiang_img": '',
                "nick": "",
                "flagid": '',
                "pinglun": ''
            };
        },
        daorushuziren: function (e) {
            console.log(this.file);
            const formData = new FormData();
            formData.append('file', this.file);
            formData.append('flagid', this.flagid2);

            // let _param = {
            // 	'flagid':this.flagid2,
            // 	'files':''
            // }
            daorushuziren(formData).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.open2 = false;
                    this.init();
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        daoru: function (e) {
            this.open2 = true;
        },
        handleRemove2(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview2(file) {
            console.log(file);
        },
        handleExceed2(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove2(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },


        /*************************     数字人类型                  ****************************** */
        init2: function () {
            this.loadinggroup = true;
            let _param = {
                "size": this.pageSizegroup,
                "page": this.pageNumbergroup,
                "input": this.searchinputgroup,
            }
            getShuZiRenDatagroup(_param).then((res) => {
                console.log(res);
                this.tableDatagroup = res.data.list;
                this.totalgroup = res.data.total;
                this.loadinggroup = false;
            })
        },
        searchgroup: function () {
            this.searchinputgroup = this.searchinputgroup;
            this.init2();
        },
        handleSizeChangegroup: function (e) {
            console.log(e);
            this.pageSizegroup = e;
            this.init2();
        },
        handleCurrentChangegroup: function (e) {
            console.log(e);
            this.pageNumbergroup = e;
            this.init2();
        },
        //已选
        handleSelectionChangegroup: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.id)

            }
            this.multipleSelectiongroup = selectChang;
            this.multipleSelectioncountgroup = selectChang.length;
            console.log(selectChang);
        },
        //创建表单
        createdShuzirengroup: function (e) {
            this.formgroup = {
                "id": '',
                "name": '',
                "remark": "",
            },
                this.opengroup = true;
        },
        //提交表单  创建 
        submitFormgroup: function (e) {
            console.log(this.formgroup);
            createShuzirengroup(this.formgroup).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.opengroup = false;
                } else {
                    this.msgError(res.msg);
                }
            })


        },
        subEditFormgroup: function (e) {
            console.log(e);
            editShuzirengroup(this.formgroup).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.opengroup = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },

        delgroup: function (data) {
            this.$confirm('确定删除【' + data.name + '】数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'id': data.id
                }
                delShuzirengroup(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editgroup: function (data) {

            this.formgroup.id = data.id;
            let editForm = {
                "id": data.id,
                "name": data.name,
                "remark": data.remark,

            }
            Object.assign(this.formgroup, editForm);
            this.opengroup = true;
        },
        //批量删除
        piliangshanchugroup: function (e) {
            this.$confirm('确定批量删除选中的数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'ids': this.multipleSelectiongroup
                }
                pldelShuzirengroup(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        chakangroup: function (e) {
            this.activeName = 'first';
            this.type = e.id;
            this.init();
        },
        selectImgs: function (res) {

            console.log(res);
            this.IsShowPicDig = true;
            this.dialogImageUrl = res[0].urls
        },
        cleanDiaglog: function (shows) {
            this.IsShowPicDig = false;
        },
        openUploadDialBg: function () {

            this.IsShowPicDig = true;
        },

        formatShuzirenType: function (row, column) {
            if (row.flagname == null) {
                return "未分类"
            }
            return row.flagname
        },

    }
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 100px;
    height: 100px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.shaixuan {
    display: flex;
    flex-flow: nowrap;
    align-content: center;
    margin-top: 15px;
}

.first_content {
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
    align-content: center;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;
      position: relative;
      overflow: hidden; */
    width: 100px;
    height: 100px;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 160px;
}

.yixuan {
    margin: 20px;
    color: #787878;
}
</style>